<template>
    <div class="links mw-100 shadow-sm">
      <breadcrumb :navigation="navigation" />
      <ul v-if="links.length > 0" class="links-ul">
        <li v-for="item in links" :key="item.id">
          <a :href="item.path"
             @mouseenter="mouse"
             @mouseleave="leave" target='_blank'>
            {{item.name}}
          </a>
        </li>
      </ul>
      <not-searching v-else :isShow="true" :type="contentType" />
    </div>
</template>

<script>
import Breadcrumb from '../../components/Breadcrumb'
import NotSearching from '../../components/NotSearching'
import { mapGetters } from 'vuex'
import { list } from '@/api/links'

export default {
  name: 'Links',
  data () {
    return {
      navigation: '> 友邻',
      contentType: 'loading',
      links: []
    }
  },
  created () {
    this.getList()
  },
  methods: {
    getList () {
      this.contentType = 'loading'
      list().then(response => {
        var data = response.data
        // 判断是否是成功请求
        if (data.code === 200) {
          this.links = data.data
          if (this.links.length === 0) {
            this.contentType = 'noData'
          }
        } else {
          this.$notify({
            title: '来自远程服务器的提示',
            message: '非常抱歉，服务器生病了，管理员正在帮它治病，请耐心等候~',
            type: 'error'
          })
        }
      })
    },
    mouse (e) {
      e.currentTarget.style.color = this.getBackground
      e.currentTarget.style.borderColor = this.getBackground
    },
    leave (e) {
      e.currentTarget.style.color = ''
      e.currentTarget.style.borderColor = ''
    }
  },
  computed: {
    ...mapGetters([
      'getBackground'
    ])
  },
  components: {
    Breadcrumb,
    NotSearching
  }
}
</script>

<style scoped lang="stylus">
  .links
    display flex
    opacity 0.9
    flex-flow column
    background #fff
    height fit-content
    padding 20px 20px 20px 20px
    .links-ul
      display flex
      justify-content center
      align-items center
      flex-flow column
      margin-top 20px
      padding-top 10px
      li
        line-height 36px
        a
          color #999
</style>
